window.onload = function () {
    // 当点击某一个li的时候，该li添加下边线  bottomColor
    var lis = document.querySelectorAll(".aside .nav .nav li");
    var Aa = document.querySelectorAll(".aside .nav .nav li a");
    var oUl = document.querySelectorAll(".aside .nav .nav li ul");
    for (var i = 0; i < lis.length; i++) {
      lis[i].index = i;
      lis[i].addEventListener("click", function () {
        for (var j = 0; j < lis.length; j++) {
          lis[j].className = "";
        }
        this.className = "bottomColor";
      });
    }
    // 让a字体改变颜色
    for (var i = 0; i < Aa.length; i++) {
      Aa[i].addEventListener("click", function () {
        for (var i = 0; i < Aa.length; i++) {
          Aa[i].classList.remove("blue");
        }
        this.classList.add("blue");
      });
    }
    // 显示与隐藏
    for (var i = 0; i < Aa.length; i++) {
      Aa[i].onclick = function () {
        var uls = this.nextElementSibling;
        if (getComputedStyle(uls).height == "0px") {
          for (var j = 0; j < oUl.length; j++) {
            oUl[j].style.height = "0px";
          }
          uls.style.height =
            uls.children[0].offsetHeight * uls.children.length + "px";
        } else {
          uls.style.height = "0px";
        }
      };
    }
    var data = [
      {
        num: 1,
        name: "李四",
        id: 513092399809142022,
        age: "22",
        sex: "男",
        data: "2022-08-20 09:09:19",
      },
      {
        num: 2,
        name: "张三",
        id: 513092399800142022,
        age: "28",
        sex: "男",
        data: "2022-08-21 10:09:19",
      },
      {
        num: 3,
        name: "随便",
        id: 513092399859142022,
        age: "50",
        sex: "女",
        data: "2022-08-22 12:09:19",
      },
      {
        num: 4,
        name: "王五",
        id: 813092399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-23 09:09:19",
      },
      {
        num: 5,
        name: "小红",
        id: 513092399809142022,
        age: "24",
        sex: "男",
        data: "2022-08-24 09:09:19",
      },
      {
        num: 6,
        name: "小明",
        id: 113092399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 7,
        name: "李四",
        id: 813092399809142002,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 8,
        name: "李四",
        id: 813092399309142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 9,
        name: "李四",
        id: 813092398809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 10,
        name: "李四",
        id: 873092399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 11,
        name: "李四",
        id: 913092399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 12,
        name: "李四",
        id: 813092369809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 13,
        name: "李四",
        id: 813052399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 14,
        name: "李四",
        id: 8130923998549142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 15,
        name: "李四",
        id: 813092399209142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 16,
        name: "李四",
        id: 813092369809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 17,
        name: "李四",
        id: 813092399809042022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 18,
        name: "李四",
        id: 813096399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 19,
        name: "李四",
        id: 813082399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 20,
        name: "李四",
        id: 613092399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
      {
        num: 21,
        name: "李四",
        id: 513092399809142022,
        age: "23",
        sex: "男",
        data: "2022-08-10 09:09:19",
      },
    ];
    var page = 1;
    var count = 6;
    var searchBtn = document.querySelector(".searchBtn");
    var searchInp = document.querySelector(".searchInp");
    var oTbody = document.querySelector("tbody");
    var pagination = document.querySelector(".pagination");
    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");
    var addBtn = document.querySelector(".addBtn");
    var forms = document.querySelector(".addFrom"); //新增表单
    var inp = document.querySelectorAll(".addFrom #addModal input"); //新增下面所有的input
    var saveBtn = document.querySelector(".saveBtn");
    function application() {
      // 搜索
      var contents = searchInp.value;
      // console.log(contents);
      // alert(contents)
      var contentsArr = [];
      for (var i = 0; i < data.length; i++) {
        if (contents.trim() == "") {
          contentsArr = data;
        } else {
          if (
            data[i].name.includes(contents) ||
            data[i].sex.includes(contents) ||
            data[i].age.includes(contents)
          ) {
            contentsArr.push(data[i]);
          }
        }
      }
      // 数据的插入
      oTbody.innerHTML = "";
      var addArr = contentsArr.slice((page - 1) * count, page * count);
      for (var i = 0; i < addArr.length; i++) {
        var oTr = document.createElement("tr");
        oTr.innerHTML = `
          <td>${addArr[i].num}</td>
          <td>${addArr[i].name}</td>
          <td>${addArr[i].id}</td>
          <td>${addArr[i].age}</td>
          <td>${addArr[i].sex}</td>
          <td>${addArr[i].data}</td>
          <td>
              <button type="button" class="btn btn-info detail" data-toggle="modal" data-target="#detailModal">编辑</button>
              <button type="button" class="btn btn-danger delete">删除</button>
          </td>
          `;
        oTbody.appendChild(oTr);
      }
      // 页码的插入
      var pageBtn = document.querySelectorAll(".pageBtn");
      // 删除所有的页码
      for (var i = 0; i < pageBtn.length; i++) {
        pagination.removeChild(pageBtn[i].parentNode);
      }
      // 根据数据的长度重新添加页码
      for (var i = 1; i <= Math.ceil(contentsArr.length / count); i++) {
        var oLi = document.createElement("li");
        oLi.innerHTML = `<a href="#" class="pageBtn">${i}</a></li>`;
        if (i == page) {
          oLi.classList.add("active");
        }
        pagination.insertBefore(oLi, pagination.lastElementChild);
      }
    }
    application();
    // 当点击搜索按钮的时候
    searchBtn.addEventListener("click", function () {
      page = 1;
      application();
    });
    // 当按下回车键的时候
    searchInp.addEventListener("keyup", function () {
      // console.log(keyCode);
      if (event.keyCode == 13) {
        page = 1;
        application();
      }
      event.preventDefault();
    });
    //  当点击分页按钮的时候
    pagination.addEventListener("click", function () {
      if (event.target.className == "pageBtn") {
        page = event.target.innerText;
        application();
      }
    });
    prev.addEventListener("click", function () {
      if (page > 1) {
        page--;
        application();
      }
    });
    next.addEventListener("click", function () {
      if (page < Math.ceil(data.length / count)) {
        page++;
        application();
      }
    });
    // 表单验证
    var rules = {
      // 账号
      num: {
        reg: /^\d{1,5}$/,
        info: "请输入正确的账号信息",
      },
      // 姓名
      name: {
        reg: /^([\u4e00-\u9fa5]{2,6})$/,
        info: "请输入2-6位中文姓名",
      },
      // 身份证号码
      idCard: {
        reg: /^\d{15}|\d{}18$ /,
        info: "请正确输入您的身份证号码",
      },
      // 年龄
      age: {
        reg: /^([0-9]\d|100)$/,
        info: "年龄过大",
      },
      // 性别
      sex: {
        reg: /^[男|女]{1}$/,
        info: "请输入“男”或者“女”",
      },
      // 治愈时间
      data: {
        reg: /^(?:19|20)[0-9][0-9]-(?:(?:0[1-9])|(?:1[0-2]))-(?:(?:[0-2][1-9])|(?:[1-3][0-1])) (?:(?:[0-2][0-3])|(?:[0-1][0-9])):[0-5][0-9]:[0-5][0-9]$/,
        info: "格式有误：2022-08-21 09:10:02",
      },
    };
    // 当表单里的input失去焦点的时候
    for (var i = 0; i < inp.length; i++) {
      inp[i].addEventListener("blur", function () {
        var str = this.value;
        if (str.trim() == "") {
          this.parentNode.nextElementSibling.innerHTML = "内容不能为空";
          this.parentNode.nextElementSibling.classList.add("red");
        } else if (rules[this.name].reg.test(str) == false) {
          this.parentNode.nextElementSibling.innerHTML = rules[this.name].info;
          this.parentNode.nextElementSibling.classList.add("red");
        } else {
          this.parentNode.nextElementSibling.innerHTML = "√";
          this.parentNode.nextElementSibling.classList.add("right");
        }
      });
    }
    // 当提交表单的时候
    forms.addEventListener("submit", function () {
      var temp = true;
      for (var j = 0; j < inp.length; j++) {
        var str = inp[j].value;
        if (str.trim() == "") {
          inp[j].parentNode.nextElementSibling.innerHTML = "内容不能为空";
          inp[j].parentNode.nextElementSibling.classList.add("red");
          temp = false;
        } else if (rules[this.name].reg.test(str) == false) {
          inp[j].parentNode.nextElementSibling.innerHTML =
            rules[inp[j].name].info;
          inp[j].parentNode.nextElementSibling.classList.add("red");
          temp = false;
        } else {
          inp[j].parentNode.nextElementSibling.innerHTML = "√";
          inp[j].parentNode.nextElementSibling.classList.add("right");
        }
      }
      if (temp == false) {
        event.preventDefault();
        $("#addModal").modal("show"); // 隐藏模态框
      }
    });
    oTbody.addEventListener("click", function () {
      // 删除
      if (event.target.className.includes("delete")) {
        var id = event.target.parentNode.parentNode.children[0].innerText; //根据id删除相应的行
        // console.log(id);
        // 循环遍历拿到所有的数据
        for (var i = 0; i < data.length; i++) {
          // 如果点击的元素和该行的id相同，那么就删除这一行
          if (data[i].num == id) {
            var confirms = confirm("确认删除" + data[i].name + "吗?");
            if (confirms) {
              data.splice(i, 1); //data是数组对象
            }
          }
        }
        application();
      }
    });
    // 当点击新增的时候
    addBtn.addEventListener("click", function () {
      var addId = document.querySelector(".addId").value;
      var addName = document.querySelector(".addName").value;
      var addCard = document.querySelector(".addCard").value;
      var addAge = document.querySelector(".addAge").value;
      var addSex = document.querySelector(".addSex").value;
      var addData = document.querySelector(".addData").value;
      data.push({
        num: addId,
        name: addName,
        id: addCard,
        age: addAge,
        sex: addSex,
        data: addData,
      });
      application();
      $("#addModal").modal("hide");
    });
    // 当点击编辑的时候
    oTbody.addEventListener("click", function () {
      if (event.target.className.includes("detail")) {
        var id = event.target.parentNode.parentNode.children[0].innerText;
        // console.log(id);
        for (var i = 0; i < data.length; i++) {
          if (data[i].num == id) {
            document.querySelector(".editId").value = data[i].num;
            document.querySelector(".editName").value = data[i].name;
            document.querySelector(".editCard").value = data[i].id;
            document.querySelector(".editAge").value = data[i].age;
            document.querySelector(".editSex").value = data[i].sex;
            document.querySelector(".editData").value = data[i].data;
          }
        }
      }
    });
    //  当点击保存的时候
    saveBtn.addEventListener("click", function () {
      var id = document.querySelector(".editId").value;
      for (var i = 0; i < data.length; i++) {
        if (data[i].num == id) {
          data[i].num = document.querySelector(".editId").value;
          data[i].name = document.querySelector(".editName").value;
          data[i].id = document.querySelector(".editCard").value;
          data[i].age = document.querySelector(".editAge").value;
          data[i].sex = document.querySelector(".editSex").value;
          data[i].data = document.querySelector(".editData").value;
        }
      }
      $("#detailModal").modal("hide");
      application();
    });
  };
  